<template>
  <div class="login">
    <div class="login-wrap">
      <div class="header">
        <div class="left">
          <img class="logo" src="../../assets/images/logo.png" alt="logo">
        </div>
        <div class="right">
          <img class="name" src="../../assets/images/name.svg" alt="name">
        </div>
      </div>
      <div class="content">
        <div class="title">欢迎登录</div>
        <div class="form-wrap">
          <el-form class="login-form" ref="login" :model="params" label-width="100px">
            <el-form-item class="input-item" label="账号">
              <el-input v-model="params.userName" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item class="input-item" label="密码">
              <el-input v-model="params.password" type="password" show-password placeholder="请输入密码"></el-input>
            </el-form-item>
<!--            <el-form-item class="margin-0">-->
<!--              <el-checkbox label="记住登录密码"></el-checkbox>-->
<!--            </el-form-item>-->
            <el-form-item class="margin-0">
              <el-button :loading="btLoading" @keyup.enter="submitLogin" class="login-button" @click="submitLogin" type="primary">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <xz-footer style="margin-top: 180px"></xz-footer>
  </div>
</template>

<script type="text/ecmascript-6">
import { setStore } from '@/utils/storage'
import XzFooter from '@/components/xz-footer'
export default {
  components: {
    XzFooter
  },
  data () {
    return {
      params: {
        userName: '',
        password: ''
      },
      btLoading: false
    }
  },
  mounted () {
    window.addEventListener('keydown', this.keydown)
  },
  destroyed () {
    window.removeEventListener('keydown', this.keydown, false)
  },
  methods: {
    // 快捷键登录
    keydown (e) {
      if (e.key === 'Enter') {
        this.submitLogin()
      }
    },
    // 登录
    submitLogin () {
      if (this.btLoading) return
      this.btLoading = true
      if (this.params.userName === '') {
        this.$message({
          message: '请输入用户账号',
          type: 'warning',
          customClass: 'zZindex',
          duration: 5000
        })
        this.btLoading = false
        return false
      }
      if (this.params.userName.length !== 6) {
        this.$message({
          message: '请输入正确的警号',
          type: 'warning',
          customClass: 'zZindex',
          duration: 5000
        })
        this.btLoading = false
        return false
      }
      if (this.params.password === '') {
        this.$message({
          message: '请输入密码',
          type: 'warning',
          customClass: 'zZindex',
          duration: 5000
        })
        this.btLoading = false
        return false
      }
      this.$http(this.$api.login, this.params).then(
        res => {
          this.btLoading = false
          if (res.code === 200) {
            setStore('userId', res.data.userId)
            setStore('token', res.data.accessToken)
            setStore('refreshToken', res.data.refreshToken)
            setStore('expiredIn', res.data.expiredIn)
            this.$router.push({
              path: '/handle'
            })
          } else {
            this.btLoading = false
            this.$message({
              message: res.message,
              type: 'error',
              customClass: 'zZindex',
              duration: 5000
            })
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  .login {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/bg.png") no-repeat;
    background-size: cover;
    position: relative;
    .login-wrap {
      margin: 0 auto;
      padding-top: 100px;
      width: 1200px;
      .header {
        margin: 0 auto;
        width: 700px;
        display: flex;
        align-items: center;
        .left {
          width: 73px;
          height: 76px;
          .logo {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          padding-left: 18px;
          .name {
            width: 572px;
            height: 69px;
          }
        }
      }
      .content {
        margin: 36px auto 0;
        width: 700px;
        height: 644px;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 0 104px;
        .title {
          font-size: 45px;
          font-family: AlibabaPuHuiTi;
          font-weight: 400;
          color: #1A1A1A;
          text-align: center;
          padding-top: 45px;
        }
        .form-wrap {
          margin-top: 65px;
          .login-form {
            .input-item {
              padding: 12px 0;
              border-bottom: 3px solid #EAEAEF;
              margin-bottom: 40px;
              /deep/ .el-form-item__label {
                padding-left: 2px;
                text-align: left;
                font-size: 24px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #666666;
              }
              .el-input {
                /deep/ .el-input__inner {
                  border: none !important;
                  font-size: 24px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                }
              }
              /deep/ .el-icon-view {
                font-size: 24px;
              }
            }
            .margin-0 {
              /deep/ .el-form-item__content {
                margin: 0!important;
                .el-checkbox {
                  display: flex;
                  align-items: center;
                  .el-checkbox__inner {
                    width: 19px;
                    height: 19px;
                    &::after {
                      width: 5px;
                      height: 10px;
                      left: 5px;
                    }
                  }
                  .el-checkbox__label {
                    font-size: 22px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #999999;
                  }
                }
              }
              .login-button {
                margin-top: 70px;
                width: 492px;
                height: 75px;
                background: #3A6FFE;
                border-radius: 4px;
                color: #fff;
                font-size: 24px;
                font-family: Source Han Sans CN;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
</style>
